<template>
    <div class="header-container">
        <div class="aside-collapse">
            <i v-if="isCollapse" class="el-icon-s-unfold" @click="asideToggle(false)"></i>
            <i v-else class="el-icon-s-fold" @click="asideToggle(true)"></i>
        </div>
        <div class="header-center"></div>
        <div class="header-badge">
            <el-popover placement="bottom" width="400" trigger="hover">
                <template>
                    <div class="notice-list" v-infinite-scroll="load">
                        <el-tag v-if="notices.length" v-for="(item, index) in notices" :key="index"
                                effect="plain" type="info"
                                style="width: 100%;height: auto;border-radius: 2px;margin-bottom: 5px;">
                            <h4 style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                <i class="el-icon-bell"></i>:{{item.title}}
                            </h4>
                            <p style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
                                <i class="el-icon-tickets"></i>:{{item.shortly}}
                            </p>
                            <p style="text-align: right">{{item.addTime}} </p>
                        </el-tag>
                        <div v-else class="notice-list__none">
                            唉哟~没有通知啦！
                        </div>
                    </div>
                    <div class="notice-list__footer">
                        <el-button style="width: 48%;" size="mini" plain round @click="handleClearAll"
                                   :disabled="!notices.length">
                            清空通知
                        </el-button>
                        <el-button style="width: 48%;" type="primary" size="mini" plain round @click="handleViewAll"
                                   :disabled="!notices.length">
                            查看全部
                        </el-button>
                    </div>
                </template>
                <el-badge slot="reference" :value="notices.length" :max="10" :hidden="notices.length===0">
                    <i class="tab-icon el-icon-bell"></i>
                </el-badge>
            </el-popover>
        </div>
        <div class="header-right" @click="personalSetting = true">
            <el-badge is-dot :class="{ dotTips: hasMsg }" :hidden="!hasMsg">
                <el-avatar :src="userObj.header"></el-avatar>
            </el-badge>
        </div>
        <user-profile :personal-setting="personalSetting" :user-profile="userObj"
                      @callBackFromSub="callBackFromSub"></user-profile>
    </div>
</template>

<script>

    import userProfile from "../../views/user/UserProfile"

    export default {
        name: "Header",
        components: {
            userProfile
        },
        props: {
            userObj: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                hasMsg: false,
                personalSetting: false,
                isCollapse: false,
                notices: []
            }
        },
        methods: {
            handleShowNotice() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/notice/list", {}).then(res => {
                    if (res.code === 200) {
                        this.notices = res.data;
                    }
                })
            },
            //懒加载
            load() {
                // this.notices.push({
                //     content: '通过审核',
                //     timestamp: '2018-04-13'
                // })
            },
            //侧边导航栏收缩
            asideToggle(param) {
                this.isCollapse = param;
                this.$emit('collapseFromHeader', this.isCollapse);
            },
            //来自 UserProfile 子组件方法回调
            callBackFromSub(param) {
                this.personalSetting = param;
                //调用查询用户是否有未读消息
                this.loadMsgBelongToLoginUser();
            },
            //查询当前用户是否有未读消息
            loadMsgBelongToLoginUser() {
                this.$httpGet(this.$axiosIMInstance, "api/rest/imChatRecord/unReadCount", {receiverId: this.userObj.id}).then(res => {
                    if (res.code === 200 && res.msgCount) {
                        this.hasMsg = true;
                    } else {
                        this.hasMsg = false;
                    }
                })
            },
            handleViewAll() {
                this.$store.commit('pushTag', {name: "通知管理", type: '', path: "/index/noticeManager"});
                this.$emit("isIndexTagFun", "/index/noticeManager");
            },
            handleClearAll() {
                this.notices = [];
            }
        }, mounted() {
            let _this = this;
            _this.loadMsgBelongToLoginUser();
            _this.handleShowNotice();
            window.addEventListener('onmessageWS', function (e) {
                if (e.detail.messageEvent.data !== "pong" && e.detail.messageEvent.data !== "success") {
                    _this.loadMsgBelongToLoginUser();
                    _this.handleShowNotice();
                }
            });
        }, destroyed() {
            window.removeEventListener('onmessageWS', function (e) {
            });
        }

    }
</script>

<style scoped lang="scss">
    .el-badge {
        height: 35px;
        line-height: 45px;

        /deep/ .el-badge__content.is-fixed {
            position: absolute;
            top: 8px;
            right: 10px;
        }
    }

    .notice-list {
        overflow: auto;
        min-height: 100px;
        max-height: 300px;
        padding-left: 5px;

        /deep/ .el-timeline-item {
            padding-bottom: 5px;

            .el-card__body {
                padding: 10px;
            }
        }

        .notice-list__none {
            text-align: center;
            line-height: 100px;
            font-weight: 500;
            color: #bfbfbf;
        }
    }

    .notice-list__footer {
        height: 30px;
        line-height: 40px;
    }

    .header-center, .header-center, .header-badge, .header-right {
        line-height: 60px;
        height: 60px;
    }

    .header-right {
        line-height: 35px;
    }

    .header-right {
        flex: 0 0 45px;

        .el-avatar--circle {
            margin-top: 1vh;
        }
    }

    .header-badge {
        flex: 0 0 55px;

        .tab-icon {
            font-size: 25px;
        }
    }

    .header-center {
        flex: 1 1 80px;
    }

    .aside-collapse {
        flex: 0 0 40px;
        cursor: pointer;
        font-size: 30px;
    }

    .aside-collapse:hover {
        color: #c6c6c6;
    }

    .header-container {
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .dotTips {
        -webkit-animation: twinkling 500ms infinite ease-in-out
    }

    .animated {
        -webkit-animation-duration: 500ms;
        animation-duration: 500ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes twinkling {
        0% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes twinkling {
        0% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    /*修改滚动条样式--start*/
    .notice-list::-webkit-scrollbar {
        display: none;
    }

    /*修改滚动条样式--end*/
</style>
